<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>留言板V1.0</title>

    <!-- Bootstrap core CSS -->
    <link href="<?php echo STATIC_PATH;?>/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">留言板V1.0</a>
        </div>
        
        <?php if(isset($_SESSION['user'])){ ?>

          <div id="navbar" class="navbar-collapse collapse">
            <div class="navbar-form navbar-right">
              <a href="./index.php?c=User&a=register" class="btn btn-success">欢迎 <?php echo $_SESSION['user']['username']; ?></a>
              <a href="./index.php?c=User&a=loginout" class="btn btn-danger">退出</a>
            </div>
          </div>

        <?php }else{ ?>
          <div id="navbar" class="navbar-collapse collapse">
            <form class="navbar-form navbar-right" id="login_form">
              <div class="form-group">
                <input type="text" placeholder="用户名" class="form-control" value="xuebin" name="username">
              </div>
              <div class="form-group">
                <input type="password" placeholder="密码" class="form-control" value="123456" name="password">
              </div>
              <button type="button" id="login" class="btn btn-success">登录</button>
              <a href="./index.php?c=User&a=register" class="btn btn-success">注册</a>
            </form>
          </div>
        <?php } ?>

        


      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row" id="msgList">
      	<?php foreach ($oldData as $k => $one): ?>
        <div class="col-md-4">
          <h3><?php echo $one['username']; ?></h3>
          <p><?php echo $one['content']; ?><br>(<?php echo formatTime($one['create_time']); ?>)</p>
          <p><a class="btn btn-success btn-sm" href="./index.php?c=Msg&a=edit&id=<?php echo $one['msg_id']; ?>" role="button">编辑</a>
          <a class="btn btn-danger btn-sm" href="./index.php?c=Msg&a=del&id=<?php echo $one['msg_id']; ?>" role="button">删除</a></p>
        </div>
        <?php endforeach ?>
      </div>
      <nav aria-label="Page navigation">
        <ul class="pagination">

          <?php if($p>1){ ?>
          <li>
            <a href="./index.php?p=<?php echo $p-1; ?>" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <?php } ?>

          <?php for ($i=$start; $i <=$end ; $i++) {  ?>
            <li class="<?php echo $i==$p ? "active" :""; ?>" ><a href="./index.php?p=<?php echo $i; ?>"><?php echo $i; ?></a></li>
          <?php } ?>

          <?php if($p<$pages){ ?>
          <li>
            <a href="./index.php?p=<?php echo $p+1; ?>" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
          <?php } ?>
        </ul>
      </nav>
      <div class="row" style="padding-top: 20px;text-align: center;">
          <p class="btn btn-success" id="more">加载更多</p>
      </div>
      <div class="row" style="padding-top: 20px;">
      	<form action="./index.php?c=Msg&a=add" method="post" class="form-inline">
		  <div class="form-group">
		    <label for="exampleInputName2">用户名</label>
		    <input type="text" class="form-control" id="exampleInputName2"  disabled="" value="<?php echo isset($_SESSION['user']) ? $_SESSION['user']['username']:'游客'; ?>"  >
		  </div>
		  <button type="submit" class="btn btn-warning">发布</button>
		  <div style="padding-top: 20px;">
		  	<textarea style="width: 100%" class="form-control" name="content" rows="3"></textarea>
		  </div>
		</form>
      </div>

      <hr>

      <footer>
        <p>&copy; 2016 Company, Inc.</p>
      </footer>
    </div> <!-- /container -->
  <script>

    // json = {name:90};

    // console.log(json.name)
    
        $(function () {
           var page = 1;
           $('#more').click(function(event) {
              page++;

              $.ajax({
                url: './index.php?c=Msg&a=getMore',
                type: 'POST',
                dataType: 'json',
                data: {p: page},
              })
              .done(function(res) {
                console.log(res);

                if(res.error==1){
                  alert(res.info);
                  return;
                }

                for(var i in res.data){

                    $('#msgList').append('<div class="col-md-4"><h3>'+res.data[i].username+'</h3><p>'+res.data[i].content+'<br>('+res.data[i].create_time+')</p><p><a class="btn btn-success btn-sm" href="./index.php?a=edit&id='+i+'" role="button">编辑</a><a class="btn btn-danger btn-sm" href="./index.php?a=del&id='+i+'" role="button">删除</a></p></div>')
                }
              })
              .fail(function() {
                console.log("error");
              })
              .always(function() {
                console.log("complete");
              });
              

           });



           $('#login').click(function(event) {
                
              data = $('#login_form').serialize();

              $.ajax({
                url: './index.php?c=User&a=login',
                type: 'POST',
                dataType: 'json',
                data:data,
              })
              .done(function(res) {
                console.log(res);

                if(res.error==1){
                  alert(res.info)
                }else{
                  alert(res.info);
                  location.reload();
                }
              })
              .fail(function() {
                console.log("error");
              })

               
           });

        })

  </script>
  </body>
</html>
